feat: add opik traces panel#33
Conversation
There was a problem hiding this comment.
Pull request overview
This PR implements the Opik trace link functionality, adding a "View Technical Trace" button to the validation sidebar that links to the Opik observability suite. The implementation follows the micro-PR mandate by focusing solely on adding the trace link UI component.
Changes:
- Added CSS styles for the trace section and button with hover effects
- Added HTML structure for the trace link in the proof sidebar
- Implemented JavaScript function to show/hide the trace link based on validation state
- Marked PR 4.1 as complete in task tracking documents
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| docs/assistant_prompts/claude_tasks.md | Marked PR 4.1 checkbox as complete |
| CONTRIBUTING.md | Marked PR 4.1 checkbox as complete |
| apps/api/static/styles.css | Added CSS styles for trace section and button with hover effects |
| apps/api/static/index.html | Added trace link HTML structure with accessibility attributes |
| apps/api/static/app.js | Added renderTraceLink function and integrated it into validation rendering flow |
|
|
||
| .btn-trace:hover { | ||
| color: var(--color-text); | ||
| border-color: var(--color-accent); |
There was a problem hiding this comment.
The CSS variable --color-accent is not defined in the stylesheet. The defined accent color variables are --color-accent-violet and --color-accent-sky. Based on the existing button patterns and the hover effect background color using violet (rgba(139, 92, 246, 0.1)), this should likely be --color-accent-violet.
| border-color: var(--color-accent); | |
| border-color: var(--color-accent-violet); |
| Trace Link Section (PR 4.1) | ||
| -------------------------------------------------------------------------- */ | ||
| .trace-section { | ||
| margin-top: auto; |
There was a problem hiding this comment.
The margin-top: auto property is used here, but the parent .proof-sidebar element is not configured as a flexbox container (it only has background-color, padding, and overflow-y). For margin-top: auto to work and push this element to the bottom, the parent needs display: flex and flex-direction: column. Without this, the margin-top won't achieve the intended layout effect.
Add opik traces panel